<template>
	<div class="traffic-guide">
		<el-card shadow="hover" class="guide-card">
			<div slot="header" class="card-header">
				<h3><i class="el-icon-car"></i> 外部交通</h3>
			</div>
			<div class="card-content">
				<ul class="traffic-list">
					<li v-for="(item, index) in externalTraffic" :key="index">
						<h4>{{ item.title }}</h4>
						<p>{{ item.description }}</p>
					</li>
				</ul>
			</div>
		</el-card>

		<el-card shadow="hover" class="guide-card">
			<div slot="header" class="card-header">
				<h3><i class="el-icon-bus"></i> 市内交通</h3>
			</div>
			<div class="card-content">
				<ul class="traffic-list">
					<li v-for="(item, index) in internalTraffic" :key="index">
						<h4>{{ item.title }}</h4>
						<p>{{ item.description }}</p>
					</li>
				</ul>
			</div>
		</el-card>
	</div>
</template>

<script>
	export default {
		name: 'TrafficGuide',
		data() {
			return {
				externalTraffic: [],
				// 市内交通数据
				internalTraffic: []
			}
		},
		mounted() {
			this.$http.get("userApi/guideCtl/externalTraffic").then((resp) => {
				if (resp.data.code == 200) {
					this.externalTraffic = resp.data.data;
				}
			})
			this.$http.get("userApi/guideCtl/internalTraffic").then((resp) => {
				if (resp.data.code == 200) {
					this.internalTraffic = resp.data.data;
				}
			})
		}
	}
</script>

<style scoped>
	.guide-card {
		margin-bottom: 20px;
		transition: transform 0.3s;
	}

	.guide-card:hover {
		transform: translateY(-5px);
	}

	.card-header {
		display: flex;
		align-items: center;
	}

	.card-header h3 {
		margin: 0;
		display: flex;
		align-items: center;
	}

	.card-header i {
		margin-right: 10px;
	}

	.card-content h4 {
		margin: 16px 0 8px;
		color: #1890ff;
	}

	.card-content p {
		line-height: 1.6;
		margin-bottom: 16px;
	}
</style>